<template>
  <!-- 出厂报告 -->
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item class="item-class" label="产品名称:" prop="productName">
        <el-input v-model="queryParams.productName" placeholder="请输入产品名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item class="item-class" label="规格型号:" prop="specification">
        <el-input v-model="queryParams.specification" placeholder="请输入规格型号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item class="item-class" label="产品条码:" prop="productBarcode">
        <el-input v-model="queryParams.productBarcode" placeholder="请输入产品条码" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item class="item-class" label="检验日期:" prop="inspectDate">
        <el-date-picker clearable v-model="queryParams.inspectDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择检验日期"></el-date-picker>
      </el-form-item>

      <el-form-item class="item-class" label="检验员:" prop="inspector">
        <el-input v-model="queryParams.inspector" placeholder="请输入检验员" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item class="item-class" label="审核日期:" prop="examineDate">
        <el-date-picker clearable v-model="queryParams.examineDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择审核日期"></el-date-picker>
      </el-form-item>

      <el-form-item class="item-class" label="审核员:" prop="auditor">
        <el-input v-model="queryParams.auditor" placeholder="请输入检验员" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜 索</el-button>
      </el-form-item>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['produce:factoryReport:add']">新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="warning" size="mini" icon="el-icon-download" @click="handleExport" v-hasPermi="['produce:factoryReport:export']">导出</el-button>
        </el-col>
      </el-row>

      <!-- 添加或修改检测项对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="960px" append-to-body @close="cancel">
        <div class="dialogContent">
          <el-button v-show="detailType === '2'" type="warning" size="mini" icon="el-icon-download" @click="handleDetailExport">导出</el-button>
          <el-form ref="form" :model="form" :rules="rules" label-width="140px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="产品名称:" prop="productName" label-width="100px">
                  <el-input v-model="form.productName" :disabled="detailType === '2'" placeholder="请输入产品名称" clearable @keyup.enter.native="handleQuery" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item class="item-class" label="规格型号:" prop="specification" label-width="100px">
                  <el-input v-model="form.specification" :disabled="detailType === '2'" placeholder="请输入规格型号" clearable @keyup.enter.native="handleQuery" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="产品条码:" prop="productBarcode" label-width="100px">
                  <el-input v-model="form.productBarcode" :disabled="detailType === '2'" placeholder="请输入产品条码" clearable @keyup.enter.native="handleQuery" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="检验日期:" prop="inspectDate" label-width="100px">
                  <el-date-picker clearable v-model="form.inspectDate" :disabled="detailType === '2'" type="date" value-format="yyyy-MM-dd" placeholder="请选择检验日期"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item class="item-class" label="检验员:" prop="inspector" label-width="100px">
                  <el-input v-model="form.inspector" :disabled="detailType === '2'" placeholder="请输入检验员" clearable @keyup.enter.native="handleQuery" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="审核日期:" prop="examineDate" label-width="100px">
                  <el-date-picker clearable v-model="form.examineDate" :disabled="detailType === '2'" type="date" value-format="yyyy-MM-dd" placeholder="请选择审核日期"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item class="item-class" label="审核员:" prop="auditor" label-width="100px">
                  <el-input v-model="form.auditor" :disabled="detailType === '2'" placeholder="请输入审核员" clearable @keyup.enter.native="handleQuery" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-table v-loading="loading1" :data="templateList">
                <!-- :span-method="objectSpanMethod" -->
                <el-table-column label="检验项目" align="center" prop="inspectionItems">
                </el-table-column>
                <el-table-column align="center" width="50px">
                  <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>

                <el-table-column label="技术要求" align="center" prop="technical" class-name="tableLi" />

                <el-table-column label="实测值" align="center" prop="measuredValue">
                  <template slot-scope="scope">
                    <div>
                      <input type="text" v-model="scope.row.measuredValue" :disabled="detailType === '2'" />
                    </div>

                    <!-- </el-form-item> -->
                  </template>
                </el-table-column>

                <el-table-column label="检验结果" align="center" prop="checkResult">
                  <template slot-scope="scope">
                    <div>
                      <el-radio-group v-model="scope.row.checkResult" :disabled="detailType === '2'" @input="checkChange">
                        <el-radio :label="1" value="1">√</el-radio>
                        <el-radio :label="0" value="0">×</el-radio>
                      </el-radio-group>
                    </div>

                    <!-- </el-form-item> -->
                  </template>
                </el-table-column>
              </el-table>
            </el-row>

            <el-row>
              <el-col :span="24" class="imgDiv">
                <el-form-item label="检验结论:" prop="checkResult">
                  <el-radio-group v-model="form.checkResult" disabled>
                    <el-radio :label="1">√</el-radio>
                    <el-radio :label="0">×</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <div slot="footer" class="dialog-footer" v-show="detailType === '1'">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </el-form>

    <!-- table -->
    <el-table v-loading="loading" :data="communList">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column label="序号" align="center" width="50px">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>

      <el-table-column label="产品名称" align="center" prop="productName">
        <template slot-scope="scope">
          <el-button type="text" @click="handleUpdate(scope.row,'2')">{{
            scope.row.productName
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="规格型号" align="center" prop="specification" />
      <el-table-column label="产品条码" align="center" prop="productBarcode" />

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row,'1')" v-hasPermi="['produce:factoryReport:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['produce:factoryReport:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
  </div>
</template>

<script>
import {
  getReport2,
  subReport,
  updataReport,
  detailsReport,
  deleteReport,
} from "@/api/mes/pro/factoryReport";

export default {
  name: "FactoryReport",
  data() {
    return {
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 生产工单表格数据
      checkoutList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        productName: null,
        specification: null,
        productBarcode: null,
      },
      // 表单参数
      form: {
        productName: "",
        specification: "",
        productBarcode: "",
        inspectDate: "",
        inspector: "",
        examineDate: "",
        auditor: "",
        checkResult: "",
      },
      // 表单校验
      rules: {},
      //tableList
      communList: [],
      // 模板列表
      templateList: [
        {
          inspectionItems: "外观",
          technical: "整机外表面应平整，无明显的划伤",
          measuredValue: "",
          checkResult: "",
        },
        {
          inspectionItems: "外观",
          technical: "铭牌、标志安装应端正牢固，字迹清晰",
          checkResult: "",
        },
        {
          inspectionItems: "外观",
          technical: "零部件应紧固可靠，无锈蚀、毛刺、裂纹等缺陷和损伤",
          checkResult: "",
        },
        {
          inspectionItems: "性能参数",
          technical:
            "DC-AC(油泵);三相输出电压:AC196V;电压波动<5%;电压不平衡度<1%;三相输出电流:8A;电流不平衡度<=2%",
          checkResult: "",
        },
        {
          inspectionItems: "性能参数",
          technical:
            "DC-AC(气泵);三相输出电压:AC300V;电压波动<5%;电压不平衡度<1%;三相输出电流:9.5A;电流不平衡度<=2%",
          checkResult: "",
        },
        {
          inspectionItems: "性能参数",
          technical: "DC-DC输出电压:27.5V±0.3V;",
          checkResult: "",
        },
        {
          inspectionItems: "参数校正",
          technical: "实测母线电压与显示电压误差不超过±2%;",
          checkResult: "",
        },
        {
          inspectionItems: "参数校正",
          technical: "输出电流实测与显示误差不超过±5%:",
          checkResult: "",
        },
        {
          inspectionItems: "保护功能",
          technical: "过压保护、过流保护、欠压保护能正常动作;",
          checkResult: "",
        },
        {
          inspectionItems: "绝缘阻抗",
          technical: "DC1000V 持续60S,测试电阻>20兆欧:",
          checkResult: "",
        },
        {
          inspectionItems: "耐压测试",
          technical: "DC2000V 持续60S,测试漏电流<10mA;",
          checkResult: "",
        },
        {
          inspectionItems: "老化测试",
          technical: "60C测试环境下正常运行4H无故障;",
          checkResult: "",
        },
        {
          inspectionItems: "CAN通讯",
          technical: "通讯与实际要求一致;",
          checkResult: "",
        },
        {
          inspectionItems: "产品尺寸",
          technical: "产品外形尺寸与外形图纸要求一致;",
          checkResult: "",
        },
        {
          inspectionItems: "气密测试",
          technical: "-25P<=测试值<=25PA;",
          checkResult: "",
        },
      ],
      loading1: false,
      detailType: '1',
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleDetailExport() {
      const param = {
        productId: this.form.productId
      }
      this.download(
        "/mes/report/inspection/exportDetails",
        {
          ...param,
        },
        `出厂报告明细_${new Date().getTime()}.xlsx`
      );
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "/mes/report/inspection/export",
        {
          ...this.queryParams,
        },
        `出厂报告_${new Date().getTime()}.xlsx`
      );
    },
    /** 查询生产工单列表 */
    getList() {
      getReport2(this.queryParams).then((res) => {
        console.log(res, "查询的res");
        if (res.code == 200) {
          this.communList = res.rows;
        }
      });
    },
    // 表单重置
    reset() {
      this.form = {
        interflowId: null,
        productName: "",
        specification: "",
        inspectDate: "",
        inspector: "",
        examineDate: "",
        auditor: "",
        checkResult: "",
      };
      this.loading1 = false;
      this.resetForm("form");
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 搜索 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加出厂报告";
    },
    /** 修改按钮操作 */
    handleUpdate(row, detailType) {
      this.detailType = detailType
      console.log(row, "修改的row");
      this.reset();
      this.form = row;
      this.open = true;
      if (detailType === '2') {
        this.title = "出厂报告详情";
      } else {
        this.title = "修改出厂报告";
      }
      detailsReport(row.productId).then((res) => {
        if (res.code == 200) {
          this.form = res.data;
          this.templateList = res.data.templateList;
        }
      });
    },
    // 判断当前是否是合格
    checkChange(value) {
      let bool = this.templateList.every(({ checkResult }) => checkResult == 1);
      this.form.checkResult = bool ? 1 : 0;
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.productId != null) {
            console.log(this.form, "修改的form");
            let params = {
              productName: this.form.productName,
              specification: this.form.specification,
              productBarcode: this.form.productBarcode,
              inspectDate: this.form.inspectDate,
              inspector: this.form.inspector,
              examineDate: this.form.examineDate,
              auditor: this.form.auditor,
              checkResult: this.form.checkResult,
              templateList: this.templateList,
              productId: this.form.productId,
            };
            updataReport(params).then((response) => {
              if (response.code == 200) {
                this.$modal.msgSuccess("修改成功");
                this.loading = false;
                this.open = false;
                this.getList();
              }
            });
          } else {
            let params = {
              productName: this.form.productName,
              specification: this.form.specification,
              productBarcode: this.form.productBarcode,
              inspectDate: this.form.inspectDate,
              inspector: this.form.inspector,
              examineDate: this.form.examineDate,
              auditor: this.form.auditor,
              checkResult: this.form.checkResult,
              templateList: this.templateList,
            };
            subReport(params).then((response) => {
              if (response.code == 200) {
                this.$modal.msgSuccess("新增成功"); //新增成功
                this.loading = false;
                this.open = false;
                //表单重置
                this.reset();
                //查询
                this.getList();
              }
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const productIds = row.productId || this.ids;
      this.$modal
        .confirm('是否确认删除生产工单编号为"' + productIds + '"的数据项？')
        .then(function () {
          return deleteReport(productIds);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => { });
    },
    // 行合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 3) {
        let index = this.templateList.length;
        if (rowIndex % index === 0) {
          return {
            rowspan: index,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }

      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex]; // 合并行数
        const _col = this.spanArr[rowIndex] > 0 ? 1 : 0; // 合并的列数
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
  },
};
</script>
  